.slds-datepicker__filter.slds-grid
  .slds-datepicker__filter_month.slds-grid.slds-grid_align-spread.slds-grow
    .slds-align-middle
      button.slds-button.slds-button_icon-container(type="button", (click)="moveMonth(-1)", [disabled]="previousDisabled()",
                                                    [title]="previousMonthLabel")
        svg.slds-button__icon(nglIconName="left")
        span.slds-assistive-text {{ previousMonthLabel }}
    h2.slds-align-middle([id]="uid + '_month'", aria-live="assertive", aria-atomic="true") {{ monthLabel }}
    .slds-align-middle
      button.slds-button.slds-button_icon-container(type="button", (click)="moveMonth(1)", [disabled]="nextDisabled()",
                                                    [title]="nextMonthLabel")
        svg.slds-button__icon(nglIconName="right")
        span.slds-assistive-text {{ nextMonthLabel }}

  ngl-date-year.slds-shrink-none([year]="current.year",
                                 [from]="minDate",
                                 [to]="maxDate",
                                 (yearChange)="moveYear($event)")

table.datepicker__month(role="grid", [attr.aria-labelledby]="uid + '_month'", (keydown)="keyboardHandler($event)")
  thead
    tr(nglWeekdays, [firstDayOfWeek]="firstDayOfWeek", [dayNamesShort]="dayNamesShort", [dayNamesLong]="dayNamesLong")
  tbody(*ngIf="current", nglDatepickerMonth,
        [year]="current.year",
        [month]="current.month",
        [day]="current.day",
        [selected]="_date",
        [firstDayOfWeek]="firstDayOfWeek",
        [minDate]="minDate",
        [maxDate]="maxDate",
        [dateDisabled]="dateDisabled",
        (selectDate)="select($event)")
button.slds-button.slds-align_absolute-center.slds-text-link(*ngIf="showToday", (click)="selectToday()") {{ todayLabel }}
